<template>
  <div class="upload-box" :class="{'van-cell--required':config.must}">
    <div class="upload-label">{{config.label}}</div>
    <div class="upload-value">
      <img v-if="clipImg" :src="clipImg" alt>
      <img v-else src="../assets/img/addimg.png" alt="">
      <input class="upload-file" type="file" :accept="config.accept" @change="fileChange($event)">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      clipImg: this.config.value
    };
  },
  created() {},
  props: ['config'],
  methods: {
    fileChange(e) {
      let img = document.createElement('img');
      this.clip(e, {
        resultObj: img,
        aspectRatio: 1,
        imgSize: {
          width: 120,
          height: 120
        }
      });
    }
  },
  watch: {
    clipImg: function(val, oldVal) {
      if (val) {
        this.$store.commit('SET_HEADIMAGE', val);
      }
    }
  }
};
</script>

<style>
.upload-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 10px 0 15px;
  line-height: normal;
  margin: 0 0 10px 0;
  position: relative;
  background-color: #fff;
  color: #333;
  font-size: 14px;
}
.upload-value {
  display: flex;
  width: 60px;
  height: 60px;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  color: #8c939d;
  position: relative;
}
.upload-value span {
  font-size: 1.2em;
  font-weight: normal;
}
.upload-value>img {
  width: 60px;
  height: 60px;
}
.upload-file{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
}
</style>
